<form nz-form class="form-center" [formGroup]="validateForm" (ngSubmit)="_submitForm()">
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="email" nz-form-item-required>邮箱</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('email')">
      <nz-input [nzSize]="'large'" formControlName="email" [nzId]="'email'"></nz-input>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="password" nz-form-item-required>密码</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('password')">
      <nz-input [nzSize]="'large'" formControlName="password" [nzType]="'password'" [nzId]="'password'" (ngModelChange)="updateConfirmValidator()"></nz-input>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="checkPassword" nz-form-item-required>确认密码</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('checkPassword')">
      <nz-input [nzSize]="'large'" formControlName="checkPassword" [nzType]="'password'" [nzId]="'checkPassword'"></nz-input>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="nickname" nz-form-item-required>
        <span>
          昵称
          <nz-tooltip [nzTitle]="'您想我们怎么称呼您'">
            <i nz-tooltip class="anticon anticon-question-circle-o"></i>
          </nz-tooltip>
        </span>
      </label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('nickname')">
      <nz-input [nzSize]="'large'" formControlName="nickname" [nzId]="'nickname'"></nz-input>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="phoneNumber" nz-form-item-required>手机号码</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('phoneNumber')">
      <nz-input-group [nzSize]="'large'" [nzCompact]="true">
        <nz-select formControlName="phoneNumberPrefix" style="width: 25%;">
          <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
          <nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>
        </nz-select>
        <input formControlName="phoneNumber" id="'phoneNumber'" nz-input style="width: 75%;">
      </nz-input-group>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="website" nz-form-item-required>个人网址</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('website')">
      <nz-input [nzSize]="'large'" formControlName="website" [nzId]="'website'"></nz-input>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="captcha" nz-form-item-required>电话</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('captcha')">
      <div nz-row [nzGutter]="8">
        <div nz-col [nzSpan]="12">
          <nz-input [nzSize]="'large'" formControlName="captcha" [nzId]="'captcha'"></nz-input>
        </div>
        <div nz-col [nzSpan]="12">
          <button nz-button [nzSize]="'large'" (click)="getCaptcha($event)">获取验证码</button>
        </div>
      </div>
      <div nz-form-extra>我们将确定您的身份</div>
    </div>
  </div>
  <div nz-form-item nz-row style="margin-bottom:8px;">
    <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
      <label nz-checkbox formControlName="agree">
        <span>我已同意<a>用户协议</a></span>
      </label>
    </div>
  </div>
  <div nz-form-item nz-row style="margin-bottom:8px;">
    <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
      <button nz-button [nzSize]="'large'" [nzType]="'primary'">注册</button>
    </div>
  </div>
</form>